<template>
    <div class="w750" :class="[fightDetail ? '' : 'white-bg', themes.theme]">
        <div class="header_content">
            <div class="m_item_header">
                <header class="ls-header">
                    <div class="header-new-bar" ref="bar">
                        <div class="ls-header-icon-back black" @click="goback"><span></span></div>
                        <div class="header-new-title"><span class="summary_title" :style="{ opacity: opacity }">商品详情</span></div>
                    </div>
                </header>
            </div>
        </div>
        <div v-if="fightDetail">
            <div class="detail">
                <!-- <div class="det-banner">
                    <van-swipe style="height: 375px" :autoplay="3000" @change="onChange">
                        <van-swipe-item style="font-size: 0" v-for="(item, index) in fightDetail.images" :key="index" @click="imagePreview(index)">
                            <legend-image :pic="item" :options="{ w: '375', h: '375' }" :isJD="fightDetail.prodSource == 'JD'" />
                        </van-swipe-item>
                        <template #indicator v-if="fightDetail.images && fightDetail.images.length > 1">
                            <template>
                                <div class="indicator">{{ current + 1 }} / {{ fightDetail.images.length }}</div>
                            </template>
                        </template>
                    </van-swipe>
                </div> -->
                <banner
                    :bannerImg="fightDetail.images"
                    @beforeLeave="bannerBeforeLeave"
                    :isPreview="isPreviewImg"
                    :isJD="fightDetail.prodSource == 'JD'"
                    :video="fightDetail.video"
                />

                <div class="limit-dising-banner">
                    <div class="limit-price">
                        <span class="price">
                            ￥
                            <em class="now">{{ Money(currentSku.promotionPrice)[0] }}</em>
                            .{{ Money(currentSku.promotionPrice)[1] }}
                        </span>
                        <div class="pushl">
                            <span class="num">¥{{ currentSku.originalPrice }}</span>
                            <span class="tag">{{ fightDetail.peopleNumber }}人团</span>
                        </div>
                    </div>
                    <div class="counting">
                        <p class="txt">距离结束仅剩</p>
                        <!-- <countDown1 :time="time" format="DD 天 HH 时 mm 分 ss 秒" ></countDown1> -->

                        <count-down :time="fightDetail.limitedEndtime" :custom="true" @finish="endcallback">
                            <template v-slot="times">
                                <div class="counting-clock">
                                    <span class="num" v-if="times.times.days > 0">{{ times.times.days }}天</span>
                                    <i class="wxIcon" v-if="times.times.days > 0">:</i>
                                    <span class="num">{{ times.times.hours }}</span>
                                    <i class="wxIcon">:</i>
                                    <span class="num">{{ times.times.minutes }}</span>
                                    <i class="wxIcon">:</i>
                                    <span class="num">{{ times.times.seconds }}</span>
                                </div>
                            </template>
                        </count-down>
                    </div>
                </div>
                <div class="det-wrap">
                    <div class="det-name">
                        <span class="name">
                            <span class="dtrangle" v-if="fightDetail.goodsType == 'overseas'">跨境</span>
                            {{ currentSku.name }}
                        </span>
                        <like @myEvent="changeFavorite" :favoriteStatus="favoriteStatus"></like>
                    </div>
                    <div class="det-act">{{ fightDetail.brief }}</div>
                </div>
                <div class="det-coupon" v-if="fightDetail.couponList && fightDetail.couponList.length" @click="clickCoupon">
                    <div class="coupon-tit">领券</div>
                    <div class="coupon-con">
                        <span class="item" style="margin: 0 2px" v-for="(item, index) in fightDetail.couponList" :key="index">
                            满{{ item.fullPrice }} 减 {{ item.offPrice }}
                        </span>
                    </div>
                    <div class="num">共{{ fightDetail.couponList && fightDetail.couponList.length ? fightDetail.couponList.length : '0' }}张</div>
                    <div class="more">...</div>
                </div>

                <!-- 已选 -->
                <div class="det-checked det-click" @click="clickDet(true)" style="border-radius: 0 0 12px 12px">
                    <div class="checked-tit">已选</div>
                    <div class="checked-con">
                        <span class="check-sku">{{ currentSku.selectName }}&nbsp;</span>
                    </div>
                    <div class="more">...</div>
                </div>
                <!-- /已选 -->

                <!-- 送至 -->
                <sendTo :addrData="addrData" @choiceAdd="choiceAdd" @onAddress="onAddress" />
                <!-- 送至 -->

                <div class="fighting" v-if="fightDetail.groupingList.length > 0">
                    <div class="fighting-tit" @click="gofight">
                        <span class="fl">进行中的团购</span>
                        <span class="fr">
                            更多团购
                            <img src="../../assets/images/arrow.png" alt="" />
                        </span>
                    </div>
                    <div class="fighting-item" v-for="(item, index) in fightDetail.groupingList" :key="index">
                        <div class="item-con">
                            <div class="person">
                                <span class="per-img">
                                    <img
                                        :src="item.portraitPic ? $imgUrlHead + item.portraitPic : require('@/assets/images/head-default.png')"
                                        alt=""
                                    />
                                </span>
                                已{{ item.propleCount }}人成团
                            </div>
                            <count-down :time="item.endTime" :custom="true" style="display: inline" @finish="endcallback">
                                <template v-slot="times">
                                    <div class="rest-time">
                                        剩
                                        <span class="time" :style="{ color: themes.color }">
                                            <template v-if="times.times.days">{{ times.times.days }}天</template>
                                            {{ times.times.hours }}:{{ times.times.minutes }}:{{ times.times.seconds }}
                                        </span>
                                        结束
                                    </div>
                                </template>
                            </count-down>
                        </div>
                        <span v-if="!item.own" class="item-btn" @click="fightSuccess(item.addNumber)">立即参加</span>
                        <span v-else @click="share('group', item)" class="item-btn">邀请好友</span>
                    </div>
                </div>

                <div class="fighting">
                    <div class="fighting-tit">
                        <span class="fl">拼团玩法</span>
                        <span class="fr" @click="gofightRule">
                            详细规则
                            <img src="@/assets/images/arrow.png" alt="" />
                        </span>
                    </div>
                    <div class="fighting-item">
                        <div class="item-rule cur">
                            <span class="num">1</span>
                            开团或参团
                        </div>
                        <div class="item-rule">
                            <span class="num">2</span>
                            邀请好友参加
                        </div>
                        <div class="item-rule">
                            <span class="num">3</span>
                            拼团成功
                        </div>
                    </div>
                </div>

                <div class="det-detail detailDetail" v-if="fightDetail">
					<!-- 图文详情 -->
					<graphic :goodsDetArr="fightDetail" />
					<!-- /图文详情 -->
                </div>
                <Noempty :pic="require('@/assets/images/order-empty.png')" :title="'暂无图文详情'" v-else />
            </div>

            <!-- 领优惠券 -->
            <div class="popup-hide" :class="{ show: showCoupon }">
                <div class="popup-box">
                    <div class="popup-tit">
                        <em class="tit">优惠券</em>
                        <i class="close close-pop" @click="closeAll"></i>
                    </div>
                    <div class="popup-con get-coupons">
                        <div class="get-coupons-tit" v-if="fightDetail.couponList">可领取优惠券</div>
                        <template v-if="fightDetail.couponList">
                            <div
                                class="list-item"
                                :class="{
                                    'red-got':
                                        (item.couponProvider == 'platform' && item.couponType == 'shop') ||
                                        (item.couponProvider == 'platform' && item.couponType == 'common')
                                }"
                                v-for="(item, index) in fightDetail.couponList"
                                :key="index"
                            >
                                <div class="left">
                                    <div class="num">
                                        &#65509;
                                        <span class="price">{{ item.offPrice }}</span>
                                    </div>
                                    <span class="condition">满{{ item.fullPrice }}元可用</span>
                                </div>
                                <div class="right">
                                    <div class="des">
                                        <i class="coupon-style">{{ item.couponType == 'product' ? '商品' : '店铺' }}</i>
                                        {{ item.couponName }}
                                    </div>
                                    <div class="han">
                                        <span class="use-time">
                                            {{ item.startDate | dateformat('YYYY-MM-DD') }}-{{ item.endDate | dateformat('YYYY-MM-DD') }}
                                        </span>
                                        <button class="get-btn" @click="getCoupon(item.couponId)">{{item.status | btnStatusFilter}}</button>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div class="get-coupons-tit" v-if="fightDetail.userCouponList">
                            已领取优惠券
                            <span class="tip">（满足条件后即可用于当前商品）</span>
                        </div>
                        <template v-if="fightDetail.userCouponList">
                            <div class="list-item coupon-got" v-for="(item, index) in fightDetail.userCouponList" :key="index">
                                <div class="left">
                                    <div class="num">
                                        &#65509;
                                        <span class="price">{{ item.offPrice }}</span>
                                    </div>
                                    <span class="condition">满{{ item.fullPrice }}元可用</span>
                                </div>
                                <div class="right">
                                    <div class="des" v-if="item.couponProvider == 'platform'">
                                        <i class="coupon-style">平台</i>
                                        {{ item.couponName }}
                                    </div>
                                    <div class="des" v-if="item.couponProvider == 'shop'">
                                        <i class="coupon-style">店铺</i>
                                        {{ item.couponName }}
                                    </div>
                                    <div class="han">
                                        <span class="use-time">
                                            {{ item.startDate | dateformat('YYYY-MM-DD') }}-{{ item.endDate | dateformat('YYYY-MM-DD') }}
                                        </span>
                                        <button class="get-btn">已领取</button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <!-- 领优惠券 -->

            <!-- 选择sku -->
            <div class="popup-hide" :class="{ show: showSku }">
                <div class="popup-box">
                    <div class="spec-menu">
                        <div class="spec-menu-up">
                            <div class="spec-img">
                                <!-- @click="imageSkuPreview(skuBanner)" -->
                                <legend-image
                                    :pic="currentSku.pic ? currentSku.pic : fightDetail.pic"
                                    :options="{ w: '200', h: '200' }"
                                    :class="'needsclick'"
                                    :isJD="fightDetail.prodSource == 'JD'"
                                />
                            </div>
                            <i class="close close-pop" @click="closeAll"></i>
                            <div class="spec-name">{{ currentSku.name }}</div>
                            <span class="spec-price">
                                ￥
                                <em class="price">{{ !titleTyle ? Money(currentSku.originalPrice)[0] : Money(currentSku.promotionPrice)[0] }}</em>
                                .{{ !titleTyle ? Money(currentSku.originalPrice)[1] : Money(currentSku.promotionPrice)[1] }}
                            </span>
                        </div>
                        <div class="spec-menu-middle">
                            <template v-if="skuList">
                                <div class="pro-att clearfix" v-for="(prodProp, prodPropIndex) in skuList" :key="prodPropIndex">
                                    <span class="spec-tit">{{ prodProp.propName }}</span>

                                    <div class="spec-con clearfix">
                                        <div
                                            tag="a"
                                            v-for="(prodPropVal, prodPropValIndex) in prodProp.propValues"
                                            :key="prodPropValIndex"
                                            class="item"
                                            :class="{
                                                on: prodPropVal.isSelect,
                                                itemNot: !prodPropVal.isEnable
                                            }"
                                            @click="currentFilter(prodProp.id, prodPropVal.id, prodPropVal.key)"
                                        >
                                            {{ prodPropVal.propValue }}
                                        </div>
                                    </div>
                                </div>
                            </template>

                            <div class="pro-num clearfix">
                                <span class="spec-tit">
                                    数量：
                                    <em style="color: #e2393b; margin-left: 5px" v-if="currentSku.stocks == 0">(库存不足)</em>
                                </span>
                                <div
                                    v-if="fightDetail.purchaseLimitMode && fightDetail.purchaseLimitMode != 'NOT_LIMIT'"
                                    class="text-danger font-12 d-flex a-center"
                                    style="margin: 12px 5px 0 0"
                                >
                                    <div>
                                        <span>限购：</span>
                                        <span>{{ fightDetail.purchaseLimitAmount }}</span>
                                    </div>
                                </div>
                                <div v-if="fightDetail.startSale" class="text-danger font-12 d-flex a-center" style="margin: 12px 5px 0 5px">
                                    <div>
                                        <span>起售：</span>
                                        <span>{{ fightDetail.startSaleAmount }}</span>
                                    </div>
                                </div>
                                <div class="add-sub">
                                    <a href="javascript:;" class="sub-a" :class="{'sub-limit': goodsNum == 1 || goodsNum <= fightDetail.startSaleAmount}" @click="reduce">-</a>
                                    <input
                                        type="text"
                                        value="1"
                                        :disabled="currentSku.stocks == 0 || currentSku.status == 0"
                                        class="sub-input"
                                        @keyup="changeGoodsNum"
                                        @blur="checkGoodsNum"
                                        v-model.number="goodsNum"
                                    />
                                    <a
                                        href="javascript:;"
                                        class="sub-a"
                                        :class="{'sub-limit':goodsNum == currentSku.stocks || 
																				currentSku.stocks == 0 || 
																				(fightDetail.purchaseLimitMode != 'NOT_LIMIT' && fightDetail.purchaseLimitAmount && goodsNum >= (fightDetail.purchaseLimitAmount - (fightDetail.intervalOrderCount || 0))) || 
																				(fightDetail.isLimit && goodsNum >= fightDetail.limitNumber)}"
                                        @click="add"
                                    >
                                        +
                                    </a>
                                </div>
                            </div>
                        </div>
                        <button
                            class="popup-btn"
                            :class="{
                                itemNot: currentSku.stocks == 0 || currentSku.status == 0 || !fightDetail.canPurchase
                            }"
                            @click="colseSku(!titleTyle)"
                            v-if="!titleTyle"
                        >
                            确定
                        </button>
                        <button
                            class="popup-btn"
                            :class="{
                                itemNot: currentSku.stocks == 0 || currentSku.status == 0 || !fightDetail.canPurchase
                            }"
                            @click="colseSku(titleTyle)"
                            v-if="titleTyle"
                        >
                            去开团
                        </button>
                    </div>
                </div>
            </div>

            <!-- 拉新通知栏 -->
            <div v-if="fightDetail.groupModel == 'RECRUITMENT_GROUP'" class="position-fixed left-0 w-100" style="bottom: 50px">
                <van-notice-bar scrollable text="该团仅限新用户参团，任意用户可发团（新用户指未在商城下过有效订单的）" />
            </div>

            <div class="det-foot">
                <div class="foot-box">
                    <div
                        class="font-14 position-absolute text-warning w-100 h-28p overflow-x text-nowrap"
                        style="bottom: 50px; background-color: #f8f1b7; line-height: 28px"
                        v-if="!fightDetail.canPurchase && fightDetail.purchaseDesc"
                    >
                        {{ fightDetail.purchaseDesc }}
                    </div>
                    <div class="left">
                        <div class="f-btn" @click="goIndex">
                            <em class="f-icon ind"></em>
                            <span class="f-txt">首页</span>
                        </div>
                        <!-- 暂时先屏蔽 -->
                        <div class="f-btn" @click="serviceChat">
                            <em class="f-icon ser"></em>
                            <span class="f-txt">客服</span>
                        </div>
                        <div class="f-btn" @click="gocart">
                            <em class="f-icon car">
                                <i class="c-num" v-if="cartNum != 0">{{ cartNum > 99 ? '99+' : cartNum }}</i>
                            </em>
                            <span class="f-txt">购物车</span>
                        </div>
                    </div>
                    <div class="right">
                        <span
                            class="add-cart"
                            :class="{ 'but-pe-none-rgb02': !fightDetail.canPurchase }"
                            @click="buyGoods(false)"
                            style="padding: 5px 0"
                        >
                            <span class="price">
                                ￥
                                <em class="now">{{ Money(currentSku.originalPrice)[0] }}</em>
                                .{{ Money(currentSku.originalPrice)[1] }}
                            </span>
                            <span class="txt">单独购买</span>
                        </span>
                        <span
                            class="buy-now"
                            :class="{ 'but-pe-none': !fightDetail.canPurchase }"
                            v-if="fightDetail.isHeadFree == false"
                            @click="buyGoods(true)"
                            style="padding: 5px 0"
                        >
                            <span class="price">
                                ￥
                                <em class="now">{{ Money(currentSku.promotionPrice)[0] }}</em>
                                .{{ Money(currentSku.promotionPrice)[1] }}
                            </span>
                            <span class="txt">我要开团</span>
                        </span>
                        <span class="buy-now" v-if="fightDetail.isHeadFree == true" style="padding: 5px 0; line-height: 16px" @click="buyGoods(true)">
                            <span class="" style="line-height: 40px; font-size: 16px">团长免单</span>
                        </span>
                    </div>
                </div>
            </div>
            <!-- 回到顶部 -->
            <div class="go-top" @click="backTop" v-if="btnFlag"><img src="@/assets/images/go-top.png" alt="" /></div>
            <!-- 回到顶部 -->

            <!-- <div class="share" @click="share"><img :src="require('@/assets/images/share.png')" alt="" /></div> -->
						<div class="share" :class="{ earn__share: (fightDetail.commission || fightDetail.commission === 0) && fightDetail.commission >= 0 && fightDetail.invitationCode }" @click="share">
						    <img v-if="(fightDetail.commission || fightDetail.commission === 0) && fightDetail.commission >= 0 && fightDetail.invitationCode" :src="require('@/assets/images/earn.gif')" alt="" />
						    <img v-else :src="require('@/assets/images/share.png')" alt="" />
						</div>
						<share-sheet
						    ref="shareSheet"
						    :prames="shareConfig"
						    :shareType="[
						        { type: 'link', text: '复制链接', img: require('@/assets/images/ext-link.png') },
						        { type: 'img', text: '图文', img: require('@/assets/images/ext-img.png') }
						    ]"
						>
						    <div slot="top" class="share-value" v-if="(fightDetail.commission || fightDetail.commission === 0) && fightDetail.commission >= 0 && fightDetail.invitationCode">
						        分享商品预计可得
						        <span class="price">{{ fightDetail.commission }}</span>
						        {{ commissionType == 'INTEGRAL' ? integralName : '元佣金' }}
						    </div>
						    <div class="share-des" slot="des" v-if="(fightDetail.commission || fightDetail.commission === 0) && fightDetail.commission >= 0 && fightDetail.invitationCode">
						        朋友通过你分享的页面,链接或者图文海报进店成功交易后,你可获得相应的佣金,在"会员中心-分享中心"可以查看
						    </div>
						    <div class="share-btn" slot="bottom" v-if="(fightDetail.commission || fightDetail.commission === 0) && fightDetail.commission >= 0 && fightDetail.invitationCode">
						        <router-link tag="span" to="/applyExtension" class="btn">
						            {{ (fightDetail.commission || fightDetail.commission === 0) && fightDetail.commission >= 0 && fightDetail.invitationCode ? '推广中心' : '成为推广员' }}
						        </router-link>
						    </div>
						</share-sheet>
						
            <div class="popup-haibao" v-if="posterShow">
                <div class="content">
                    <img
                        v-if="posterDataUrl"
                        :src="posterDataUrl"
                        class="poster-bg"
                        alt="邀请海报"
                        style="width: 235px; height: 440px; pointer-events: inherit"
                    />
                    <div class="content-bg" v-else id="poster" ref="poster">
                        <div class="bg-toux">
                            <div class="content-toux">
                                <legend-image :className="'img'" :pic="posterAttr.pic" :isJD="fightDetail.prodSource == 'JD'" />
                            </div>
                            <div class="name">
                                <P class="name-txet">{{ posterAttr.name }}</P>
                                <P class="title">为你推荐好物</P>
                            </div>
                        </div>
                        <div class="proder">
                            <p class="proder-text">{{ fightDetail.name }}</p>
                            <legend-image :className="'img'" :pic="fightDetail.pic" :isJD="fightDetail.prodSource == 'JD'" />
                        </div>
                        <div class="p-price">
                            <p class="Assemble">拼团价：￥{{ fightDetail.minPrice }}</p>
                            <p class="price">原价：￥{{ fightDetail.minProdPrice }}</p>
                        </div>
                        <div class="qrcode" ref="qrcode"></div>
                    </div>

                    <div class="close" @click="closeCode"><img class="closeImg" src="@/assets/images/close1.png" alt="" /></div>
                </div>
            </div>

            <!-- <share-sheet ref="shareSheet" :prames="shareConfig"></share-sheet> -->
            <customerService :shopContact.sync="shopContact"></customerService>
            <bind-phone :bindPhone="bindPhone" ref="bindPhone" @callback="callbackDetail" />
        </div>
        <Noempty :pic="require('@/assets/images/order-empty.png')" :title="'拼团商品已被删除或已被下线'" v-if="Nomsg" />
    </div>
</template>

<script>
import { ImagePreview } from 'vant'
import cash from 'utils/tool'
import { mapState } from 'vuex'
import Noempty from 'components/Noempty/Noempty'
import countDown from 'components/countdown/count-down'
import shareSheet from 'components/share/shareSheet'
import like from 'components/like/like'
import bindPhone from 'components/bindPhone/bindPhone'
import legendImage from 'components/legendImage/legendImage'
import customerService from 'components/customerService/customerService'
import sendTo from '../../views/goodsDetail/components/sendTo'
import { fighGroupdetail } from 'api/fight'
import { checkOrderParams } from 'api/goodsDetail'
import { getUserInfo } from 'api/account'
import { receive } from 'api/coupon'
import { saveOrCancel } from 'api/collectManage'
import { getCommissionTypeInfo } from 'api/extensionApi'
import { tokenManage } from 'utils/Cache'
import StringUtils from 'utils/stringUtils.js'
import fightSkuMixin from 'mixin/fightSkuMixin.js'
import banner from '../goodsDetail/components/banner'
import graphic from '../goodsDetail/components/graphic'

export default {
    mixins: [fightSkuMixin],
		filters: {
			btnStatusFilter(val) {
				if(val === null) {
					return '立即领取'
				}
				return {1: '立即领取', '-1': '已失效', 0: '已下新', 2: '已领取', 3: '已领取', 4: '已失效', 5: '已领完' }[val]
			}
		},
    components: { Noempty, like, countDown, shareSheet, legendImage, customerService, bindPhone, sendTo, banner, graphic },
    data() {
        return {
						commissionType: 'CASH',
            current: 0,
            opacity: 0,
            posterShow: false,
            posterDataUrl: '',
            favoriteStatus: false, //是否关注本商品
            GroupId: '',
            Money: cash, //价格转换
            fightDetail: '', //拼团获取信息
            bannerPics: [], //轮播图集合
            ruleList: [], //优惠活动列表
            showCoupon: false, //优惠券列表的现实隐藏
            showSku: false, //展示sku列表
            price: 1, //各个sku下商品的原价
            Nomsg: false,
            titleTyle: true, // 文字类型  true- 去开团  false  确定
            BillingType: true, // 默认是拼团
            btnFlag: false,
            carNum: 0, //购物车角标
            shareUrl: window.location.href,
            isLogin: tokenManage.getToken() ? true : false, //默认没登录

            propObjs: [], // 存改变后的skulist数据
            map: {}, //存cnProperties作为key的数据
            currentSku: {}, //找到isMainSku == true的元素 并且用来渲染页面，数据联动
            cuccentValue: {},
            skuList: [], //用来渲染页面的sku选择
            shopContact: false,

            bindPhone: {
                already: false, // 是否已绑定
                showPopup: false
            },
            addrData: {
                type: 0, //0:选择用户已有的收货地址(后台读取addrId数据)，1：自定义选择区域(后台读取addrList数据)
                addrId: '',
                addrList: [],
                addrName: ''
            },

            isPreviewImg: false //是否默认关闭预览图片
        }
    },
    computed: {
        ...mapState(['integralName','themes', 'cartNum'])
    },

    mounted() {
        let that = this

        //买家在商品详情页面选择的收货地址要缓存到本地, 进入下一个商品时就从本地获取收货地址来请求商品详情接口
        // if (!StringUtils.isEmpty(sessionStorage.getItem('addrData'))) {
        //     this.addrData = JSON.parse(sessionStorage.getItem('addrData'))
        // }

        if (this.isLogin) {
            this.$store.dispatch('getCartGoods')
        }

        this.GroupId = this.$route.query.id
        //获取活动详情
        this.loadfightDetail(this.GroupId, this.addrData)
        window.addEventListener('scroll', this.scrollToTop)
        // if (window.history && window.history.pushState) {
        // 	history.pushState(null, null, document.URL);
        // 	window.addEventListener('popstate', this.closePic, false); //false阻止默认事件
        // }
    },
    methods: {
        loadfightDetail(mergeGroupId, addrData) {
            let noActive = ''
            fighGroupdetail({
                mergeGroupId: mergeGroupId,
                type: addrData.type ? addrData.type : 0,
                addrId: addrData.addrId ? addrData.addrId : '',
                addrList: addrData.addrList ? addrData.addrList : [],
                addrName: addrData.addrName ? addrData.addrName : ''
            }).then((res) => {
                if (res.status == 1) {
                    if (res.result) {
                        this.fightDetail = res.result
                        this.favoriteStatus = res.result.isCollect
						// 配置分享
						let imgUrl = ''
						if (this.fightDetail.prodSource == 'JD') {
						    imgUrl = 'http://img13.360buyimg.com/n12/' + this.fightDetail.pic
						} else {
						    imgUrl =  this.$imgUrlHead + this.fightDetail.pic + '?x-oss-process=image/resize,w_124,h_124,limit_0,m_fixed'
						}
						this.$weChat.share({
							title: this.fightDetail.name,
							desc: '一起来和我拼团吧',
							imgUrl
						})
												
                        if (!StringUtils.isEmpty(res.result.addrData)) {
                            this.addrData = res.result.addrData //值传到后台后，后台再原封不动的返回给前端(当前端不传值时，则返回的是默认地址或北京朝阳区)
                        }

                        // 商品起售问题
                        if (res.result.startSale) {
                            this.goodsNum = res.result.startSaleAmount
                        }

                        //sku的集合
                        let skuDtoList = this.fightDetail.skuDtoList

                        //多个sku的集合
                        if (skuDtoList[0].cnProperties) {
                            this.propObjs = skuDtoList.map((v) => {
                                return {
                                    ...v,
                                    cnProperties: v.cnProperties.split(';'),
                                    properties: v.properties.split(';'),
                                    key: v.properties,
                                    selectName: v.cnProperties
                                }
                            })

                            this.propObjs.forEach((v) => {
                                this.map[v.key] = v
                            })

                            this.currentSku = this.propObjs.find((v) => v.isMainSku)

                            this.cuccentValue = this.currentSku.properties.reduce((res, cur) => {
                                let arr = cur.split(':')
                                res[arr[0]] = arr[1]
                                return res
                            }, {})

														
														this.getCommissionType()
                            this.buildSkuList()
                        } else {
                            //没有sku
                            this.currentSku = skuDtoList[0]
                            this.currentSku.selectName = skuDtoList[0].name
                        }
                    } else {
                        this.Nomsg = true
                    }
                } else {
                    this.Nomsg = true
                    this.$toast(res.msg)
                }
            })
        },
				// 获取分享类型信息
				async getCommissionType() {
					try {
					    let res = null
					    this.fightDetail.isPromoter == true && this.fightDetail.supportDist == true && (res = await getCommissionTypeInfo())
					
					    res && (this.commissionType = res.result.commissionType)
					} catch (error) {}
				},

        ///关闭图片预览
        closePic() {
            if (this.picPreview) {
                this.picPreview.close()
                return
            } else {
                this.goback()
            }
        },
        //返回
        goback() {
            if (window.history.length <= 2 || window.history.length <= 1) {
                this.$router.replace('index')
                return
            }

            this.$router.back()
            this.$router.isBack = true
        },

        //展示选择sku
        clickDet() {
            this.showSku = true
            this.titleTyle = true
        },
        buyGoods(flag) {
            this.BillingType = flag
            this.titleTyle = flag
            this.showSku = true
        },
        //展示选择优惠券
        clickCoupon() {
            this.showCoupon = true
        },
        //提交订单
        colseSku() {
            if (this.isLogin) {
                //校验是否有绑定过手机号码
                if (!this.fightDetail.bindMobile) {
                    this.showSku = false
                    // this.bindPhone.showPopup = true
					// this.$router.replace({ path: '/login', query: { redirect: this.$route.fullPath } })
					this.$utils.goLoginPage(this)
                    return
                }
            }

            if (this.currentSku.stocks == 0) {
                this.$toast('此选择的商品库存为0~~~')
                return
            }

            if (this.goodsNum == 0) {
                this.$toast('购买商品数量不能少于0~~~')
                return
            }

            if (this.fightDetail.isLimit == true) {
                // if (this.goodsNum > this.fightDetail.limitNumber) {
                //     this.$toast({
                //         message: `该拼团活动限购${this.fightDetail.limitNumber}件`,
                //         duration: 800
                //     })
                //     this.goodsNum = this.fightDetail.limitNumber
                //     return
                // }
				if (this.currentSku.stocks == 0) {
				    this.$toast('您好，你选择得此商品属性库存为0')
				    return
				}
				if (this.goodsNum + 1 > this.fightDetail.limitNumber - (this.currentSku.intervalOrderCount || 0)) {
				    this.$toast({
				        message: `该拼团活动限购${this.fightDetail.limitNumber}件，已购${this.currentSku.intervalOrderCount || 0}件`,
				        duration: 800
				    })
				    return
				}
            }

            let parmes = {
                mergeGroupId: this.$route.query.id,
                number: this.goodsNum,
                productId: this.fightDetail.productId,
                skuId: this.currentSku.skuId
            }

            // BillingType == true  是拼团的提交   false 是普通的
            if (this.BillingType) {
                let prames = {
                    type: 'MERGE_GROUP',
                    addNumber: this.fightDetail.addNumber,
                    activeId: this.GroupId,
                    count: this.goodsNum,
                    prodId: this.fightDetail.prodId,
                    skuId: this.currentSku.skuId,
                    buyNow: true,
                    addrId: this.addrData.addrId ? this.addrData.addrId : '',
                    addrList: this.addrData.addrList ? this.addrData.addrList : [],
                    addrName: this.addrData.addrName ? this.addrData.addrName : ''
                }
                this.checkOrder(prames)
            } else {
                let prames = {
                    type: 'NORMAL',
                    buyNow: true,
                    count: this.goodsNum,
                    prodId: this.fightDetail.prodId,
                    skuId: this.currentSku.skuId,
                    addrId: this.addrData.addrId ? this.addrData.addrId : '',
                    addrList: this.addrData.addrList ? this.addrData.addrList : [],
                    addrName: this.addrData.addrName ? this.addrData.addrName : ''
                }

                this.checkOrder(prames)
            }
        },

        checkOrder(prames) {
            checkOrderParams(prames).then((res) => {
                if (res.status != 1) {
                    this.$toast(res.msg)

                    // 起售判断
                    if (this.fightDetail.startSale) {
                        this.goodsNum = this.fightDetail.startSaleAmount
                        return
                    }

                    // 限购判断
                    if (this.fightDetail.purchaseLimitMode && this.fightDetail.purchaseLimitMode != 'NOT_LIMIT') {
                        this.goodsNum = this.fightDetail.purchaseLimitAmount
                        return
                    }

                    return
                }
                this.showSku = false

                this.$router.push({
                    path: `/submitOrder`,
                    query: prames
                })
            })
        },
        closeAll() {
            this.showCoupon = false
            this.showActivity = false
            this.showSku = false
        },

        goIndex() {
            this.$router.push('/')
        },

        callbackDetail() {
            this.fightDetail.bindMobile = true
        },
        //是否收藏
        changeFavorite(flag) {
            saveOrCancel(flag, this.fightDetail.prodId).then((res) => {
                if (res.status == 1) {
                    this.favoriteStatus = !this.favoriteStatus
                    this.$toast(res.result)
                } else {
                    this.$toast(res.msg)
                }
            })
        },
        gofight() {
            this.$router.push({
                path: `/fightMore`,
                query: {
                    mergeGroupId: this.GroupId
                }
            })
        },
        endcallback() {
            this.loadfightDetail(this.$route.query.id)
        },
        //跳参团
        fightSuccess(event) {
            let addNumber = event
            this.$router.push({
                path: `/fightgroupDetail`,
                query: {
                    sn: addNumber,
                    source: 'GROUP'
                }
            })
        },
        //去拼团玩法
        gofightRule() {
            this.$router.push({
                path: `/fightRule`
            })
        },
        gocart() {
            this.$router.push({
                path: `/cart`
            })
        },

        onChange(index) {
            this.current = index
        },

        //图片预览
        imagePreview(index) {
            let arrPic = []

            for (var i = 0; i < this.fightDetail.images.length; i++) {
                if (this.fightDetail.prodSource == 'JD') {
                    arrPic.push(`http://img13.360buyimg.com/n12/` + this.fightDetail.images[i])
                } else {
                    arrPic.push(this.$imgUrlHead + this.fightDetail.images[i])
                }
            }
            this.picPreview = ImagePreview({
                images: arrPic,
                startPosition: index,
                onClose() {
                    // do something
                }
            })
        },
        getCoupon(couponId) {
            this.$utils.uDebounce(() => {
				receive({ couponId: couponId }).then((res) => {
				    if (res.status == 1) {
				        this.$toast(res.result)
						this.loadfightDetail(this.GroupId, this.addrData)
				    } else {
				        this.$toast(res.msg)
				    }
				})
			})
        },
        // 点击图片回到顶部方法，加计时器是为了过渡顺滑
        backTop() {
            let that = this
            let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                if (that.scrollTop === 0) {
                    clearInterval(timer)
                }
            }, 16)
        },
        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
        scrollToTop() {
            let that = this
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            that.scrollTop = scrollTop
            if (that.scrollTop > 60) {
                that.btnFlag = true
            } else {
                that.btnFlag = false
            }

            // 滚动渐变
            const bar = this.$refs.bar
            if (scrollTop < 200) {
                this.opacity = (scrollTop / 260).toFixed(1) * 1
            } else {
                this.opacity = 1
            }

            bar.style.background = `rgba(255,255,255,${this.opacity})`

            this.opacity == 0 ? (bar.childNodes[0].style.background = `rgba(0,0,0,0.5)`) : (bar.childNodes[0].style.background = `rgba(0,0,0,${0})`)

            this.opacity == 0 ? bar.childNodes[0].classList.add('black') : bar.childNodes[0].classList.add('witer')

            this.opacity == 0 && bar.childNodes[0].classList.remove('witer')
        },
        share(type, groupItem) {
            this.$refs.shareSheet.sheetShow = true

            // 拼团分享
            if (type == 'group') {
							this.shareUrl = `${window.location.origin}/fightgroupDetail?sn=${groupItem.addNumber}&source=GROUP&invitCode=${this.fightDetail.invitationCode || ''}`
                this.shareConfig.shareText = `再邀请${
                    this.fightDetail.peopleNumber - groupItem.propleCount
                }人即可拼购成功，快去邀请小伙伴一起拼团吧！${this.shareUrl}`
								
            }
            // 页面分享
            else {
							this.shareUrl = `${window.location.href}?invitCode=${this.fightDetail.invitationCode || ''}`
              this.shareConfig.shareText = `邀请${this.fightDetail.peopleNumber}人即拼购成功，快去邀请小伙伴一起拼团吧！${this.shareUrl}`
                
            }
            if (!this.posterDataUrl) {
                if (this.isLogin) {
                    getUserInfo()
                        .then((res) => {
                            if (res.status == 1) {
                                this.posterAttr.name = res.result.nickName
                                this.posterAttr.pic = res.result.headPortrait
                            } else {
                                this.posterAttr.name = '匿名'
                                this.posterAttr.pic = ''
                            }
                        })
                        .catch(() => {
                            this.posterAttr.name = '匿名'
                            this.posterAttr.pic = ''
                        })
                } else {
                    this.posterAttr.name = '匿名'
                    this.posterAttr.pic = ''
                }
            }
        },
        serviceChat() {
            this.shopContact = true
        },
        // 点击"送至"里的地址
        choiceAdd(addrId) {
            let addrData = {
                type: 0, //0:选择用户已有的收货地址(后台读取addrId数据)，1：自定义选择区域(后台读取addrList数据)
                addrId: addrId,
                addrList: [],
                addrName: ''
            }
            this.loadfightDetail(this.GroupId, addrData)
        },

        onAddress(addrData) {
            this.loadfightDetail(this.GroupId, addrData)
        },

        closeCode() {
            this.posterShow = false
            this.posterDataUrl = ''
        },

        //监听是否关闭预览
        bannerBeforeLeave(val) {
            this.isPreviewImg = val
        }
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollToTop)
        window.removeEventListener('popstate', this.closePic, false) //false阻止默认事件
    }
}
</script>

<style src="../../assets/css/style/detail-style.css" scoped></style>
<style src="../../assets/css/style/popup-style.css" scoped></style>
<style src="../../assets/css/style/fight-style.css" scoped></style>
<style src="../../assets/css/detail.css" scoped></style>
<style src="../../assets/css/popup.css" scoped></style>
<style src="../../assets/css/get-coupons.css" scoped></style>
<style src="../../assets/css/comment-list.css" scoped></style>
<style src="../../assets/css/fight.css" scoped></style>
<style scoped>
.detailDetail {
    margin-top: 10px !important;
}
.empty {
    margin-top: 0 !important;
}
.item.pointerEvents {
    pointer-events: none;
}
</style>

<style lang="stylus" scoped>
.earn__share{
	    position: fixed;
	    right: 10px;
	    width: 56px !important;
	    bottom: 115px;
	    height: 56px !important;
		line-height 56px;s
	    border-radius: 50%;
	    font-size: 0;
	    cursor: pointer;
	    text-align: center;
		background:transparent!important;
		img{
			width: 56px !important;
			height: 56px !important;
		}
}
	
.det-banner {
    img {
        width: 100%;
        height: 375px;
    }
}

#commCotent{
    width: 100%;
    overflow: hidden;
    display: table;
    word-wrap: break-word;
    word-break: break-all;
    >>> img {
        max-width: 100% !important;
        height: auto!important;
    }
    >>> a {
        width: 100% !important;
    }
    >>> div {
        width: 100% !important;
    }
    >>> ul {
        width: 100% !important;
    }
    >>> li {
        width: 100% !important;
    }
}

.det-foot .foot-box .right {
    flex: 2;
}
.det-foot .foot-box .left {
    flex: 1;
}
.col img {
  display: block;
  margin: auto;
  width: 14px;
  height: 14px;
}
.indicator {
  position: absolute;
  right: 15px;
  bottom: 15px;
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 11px;
  font-size: 14px;
  text-align: center;
}
</style>
